<template>
	<view style="width: 100%;height: 100%;background-color: #fff;">
		<!-- 产品名称 
		<view style="font-weight: bolder;font-size: larger; padding: 10px;">
			{{data?.jingle.title}}
		</view>-->
		<!-- 广告词 
		<view style="padding: 5px; color: #888;">{{data?.jingle.jingle}}</view>
		-->
		<!-- 当前价格 -->
		<view style="padding: 5px; background-color: #fff2f2;border-radius: 10px;display: flex;gap: 5px;margin: 10px;">
			<view style="padding: 5px ;display: flex;align-items: flex-end;">
				<tn-icon name="money" size="40" color="#666"></tn-icon>
				<view class="buy-price" style="color: #666;font-size: larger;">
					{{ (data?.price.money / 100).toFixed(2) }}
				</view>
			</view>
			<view v-if="data?.is_money"
				style="color: #fff;background-color: #ff6b6b;display: flex; align-items: flex-end;padding: 10px;border-radius: 10px;gap: 5px;">
				<view style="font-size: xx-small;">会员价</view>
				<view class="buy-price" style="font-size: larger;">
					{{ (curPrice / 100).toFixed(2) }}
				</view>
			</view>
			<view v-if="data?.is_card"
				style="color: #fff;background-color: #f0ad4e;display: flex;align-items: flex-end;padding: 10px;border-radius: 10px;gap: 5px;">
				<view style="font-size: xx-small;">兑换券</view>
				<view class="buy-price" style="font-size: larger;">
					{{ (curCard / 100).toFixed(2) }}
				</view>
			</view>
			<view v-if="data?.is_points"
				style="color: #fff;background-color: #007aff;display: flex;align-items: flex-end;padding: 10px;border-radius: 10px;gap: 5px;">
				<view style="font-size: xx-small;">积分</view>
				<view class="buy-price" style="font-size: larger;">
					{{ curPoint }}
				</view>
			</view>
		</view>

		<!-- 产品标签 -->
		<view v-if="data?.tag.length > 0"
			style="padding: 5px; background-color: #fff2f2;border-radius: 10px;display: flex;gap: 5px;margin: 10px;flex-wrap: wrap;">
			<tn-tag v-for="(tag, index) in data?.tag" :key="index" type="info" shape="round" font-size="24" border
				:border-color="tag.color" :bg-color="tag.bgcolor" :text-color="tag.color">{{ tag.name }}</tn-tag>
		</view>

		<!-- 规格 -->
		<view v-if="data?.specs.length > 0"
			style="padding: 5px; background-color: #fff2f2;border-radius: 10px;display: flex;flex-direction: column;gap: 5px;margin: 10px;">
			<view style="font-weight: bold;padding: 5px 0;">选择规格</view>
			<view style="padding: 5px 0;display: flex;flex-wrap: wrap;gap: 10px;">
				<view v-for="(item, index) in data?.specs" :key="index" :class="{ curAction: curSpecs === item.id }"
					@click="curSpecsChange(item)"
					style="display: flex; align-items: center;gap: 5px;padding: 5px;border-radius: 5px; background-color: #fff;">
					<tn-avatar :url="sConf.pics + item.icon" size="sm" shape="square"></tn-avatar>
					<view class="">{{ item.name }}</view>
					<view style="color: #aaaaaa;font-weight: bold;"><text
							style="font-size: xx-small;">￥</text>{{ (item.money / 100).toFixed(2) }}</view>
					<view style="color: #ff6b6b;font-weight: bold;"><text style="font-size: xx-small;">会员价:</text>
						{{ (item.price / 100).toFixed(2) }}
					</view>
					<view v-if="data?.is_points" style="color: #007aff;font-weight: bold;"><text
							style="font-size: small;">积分兑换 </text>{{ item.point }}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "sub-prodict-info-card",
		data() {
			return {
				sConf: getApp().globalData,
				curSwiperIndex: 0,
				curMoney: 0,
				curPrice: 0,
				curPoint: 0,
				curCard: 0,
				curSpecs: null,
			};
		},
		mounted() {
			this.loadDefData()
		},
		props: {
			data: {
				type: Object,
				default: null
			},
			card: {
				type: Boolean,
				default: false
			},
			point: {
				type: Boolean,
				default: false
			},
			master: {
				type: Boolean,
				default: false
			},
			money: {
				type: Boolean,
				default: false
			}
		},
		methods: {
			loadDefData() {
				this.curPrice = this.data.price.price || 0;
				this.curPoint = this.data.cur_point || 0;
				this.curCard = this.data.cur_card || 0;
			},
			/**
			 * 选择当前规格
			 */
			curSpecsChange(e) {
				this.curPrice = e.price;
				this.curPoint = e.point;
				this.curCard = e.card;
				this.curSpecs = e.id;
				this.$emit("curSpecs", e);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.buy-price::first-letter {
		font-size: x-large;
	}

	.curAction {
		border: 2px solid #ff6b6b;
	}
</style>